<template>
  <div class="hm-information-card">
    <div class="box">
      <div class="hd">
        <div class="container">
          <div class="tagWrap">
            <image class="avatar" :src='userInfo.avatar' v-if="userInfo.avatar" ></image>
          </div>
          <div class="nameClass">
            <div class="wrap">
              <text class="alexander">预约人：{{ userInfo.nickname }}</text>
            </div>
            <div class="dataClass">
              <text class="data">预约时间：{{ options.yue_time | fmtTime }}</text>
            </div>
          </div>
        </div>
        <image class="titleImg" :src="options.dian_image" />
      </div>
      <div class="summaryClass" >
          <view style="margin-bottom:20rpx;">
            <text class="">预约医院：</text>
          <text class="">{{ options.dian_name }}</text>
          </view>

          <view style="margin-bottom:20rpx;">
            <text>地址/联系方式：</text>
            <text>{{options.dian_address}}</text>
            /
            <text>{{options.dian_phone}}</text>
          </view>
        
      </div>
      <div class="summaryClass" style="margin-top:0;flex-direction: row;margin-bottom:30rpx;">
        <text class="">当前状态：</text>
        <text class="">{{ options.status | getStatusTxt }}</text>
      </div>
      <div class="ft" style="margin-top:0;">
        <image class="shoucang" :src="shoucang" />
        <text class="num">已有{{ Math.floor(Math.random()*10+1) }}人</text>
        <text class="like">预约</text>
      </div>
    </div>
  </div>
</template>
<script>
import {
		getUserInfo
	} from '@/api/user.js';
const moment = require('@/libs/moment.min')
export default {
  props: {
    dataId: {
      type: String,
      default: 'hm-information-card'
    },
    options: {
      type: Object,
      default: function() {
        return {
          dian_address: '',
          dian_phone: '',
          tag: '阿杰',
          alexander: '阿雷',
          yue_time: '星期三',
          status: 0, // 0预约中 1已体检 2失效
          dian_image:
            require('../../static/hm-information-card/images/img_24030_0_1.png'),
          dian_name:
            '全息图像什么'
          
        };
      }
    }
  },
  data() {
    return {
      shoucang:
            require('../../static/hm-information-card/images/img_24030_0_0.png'),
      userInfo: {},
    };
  },
  mounted() {
    this.getUserInfo()
  },
  filters: {
    fmtTime(val) {
      return moment.unix(val).format('YYYY-MM-DD')
    },
    getStatusTxt(val) {
      if (val == 0) {
        return '预约中..'
      } else if (val == 1) {
        return '已体检'
      } else {
        return '已失效'
      }
    }
  },
  methods: {
    getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data
				});
			},
  }
};
</script>
<style scoped>
@import './index.response.css';
.avatar {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      margin: 0 auto;
    }
</style>
